<template>
	<div class="process-operate">
        <!-- 我的申请审批状态 -->
		<div class="apply-status">
			<a-checkbox
				v-model:checked="checkAll"
				:indeterminate="indeterminate"
				@change="onCheckAllChange"
			>
			{{ taskOptions[0]?.text }}
			</a-checkbox>
			<a-checkbox-group v-model:value="checkedList">
				<template v-for="item in taskOptions" :key="item.text">
					<div>
						<a-checkbox :value="item.text" @change="onCheckChange">
							{{ item.text }}{{ item.count }}
						</a-checkbox>
					</div>
				</template>
			</a-checkbox-group>
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineComponent, ref, unref, watch } from 'vue';
import { taskTypeEnum, doneTaskEnum } from '@/constant/enums/processCenter'
import { taskSelect } from './constant/task'
import { i18n } from '@/locales'
const { $t: iTrans, locale } = i18n

const props = defineProps<{
	selectedRows: Recordable<any>[]
	taskType: keyof typeof taskTypeEnum
	cacheData: Recordable<any>
	taskLoading: boolean
	agreePromise?: (resolve: any, reject: any) => void
	batchPromise?: () => void
	deletePromise?: (
		draftIds: string[],
		resolve?: any,
		reject?: any
	) => Promise<void>
	checkOptions: []
	checkData: []
	checkTotal: Recordable<any>
	checkAgentOptions: []
	checkAgentData: []
	checkAgentTotal: Recordable<any>
	applyCount: Recordable<any>
	doneType: string
	isRequesting: boolean
}>()
const emit = defineEmits(['onClearSelect', 'onSearch'])

const indeterminate = ref(true)
const checkAll = ref(true)
const checkedList = ref()
const taskOptions: any = ref([])
const isShowSelect: any = ref(false)
const selectCountRef = ref(0)
const selectTypeRef = ref('approve')
const onCheckAllChange = (e: any) => {
    checkedList.value = e.target.checked ? taskOptions : []
    indeterminate.value = false
}
const onCheckChange = (e: any) => {

}

watch(
	() => props.applyCount,
	(value, old) => {
		isShowSelect.value = false
		setTimeout(() => {
			if (props.taskType === 'DoneTask') {
				taskOptions.value = taskSelect[props.taskType]?.map(item => {
					item.count = 0
					for (let key in props.applyCount) {
						if (item.value === props.applyCount[key].command_type) {
							item.count = props.applyCount[key].count
						}
					}
					return item
				})
				// .filter(item => item.count > 0 || item.value === '')
			} else {
				taskOptions.value = taskSelect[props.taskType]?.map(item => {
					if (['approve','all','complete','termination'].includes(item.value) || item.value === 'todo') {
						if (item.value === 'approve') {
							item.count = props.applyCount.approve_count
						} else if (item.value === 'all') {
							item.count = props.applyCount.sum_count
						} else if (item.value === 'complete') {
							item.count = props.applyCount.complete_count
						} else if (item.value === 'termination') {
							item.count = props.applyCount.termination_count
						} else {
							item.count = props.applyCount.un_read_count
							selectCountRef.value = props.applyCount.un_read_count
						}
					}
					return item
				})
			}
			isShowSelect.value = true
		})
	}
)
watch(
	() => props.taskType,
	(value, prevValue) => {
		if (value !== prevValue) {
			// 右上方input重新赋值
			// subjectRef.value = props.cacheData?.[value]?.subject ?? ''

			// 左上方全部流程select重新赋值
			// checkDataRef.value = props.checkData
			// checkTotalRef.value = props.checkTotal

			// 全部委托人select重新赋值
			// checkAgentDataRef.value = props.checkAgentData
			// checkAgentTotalRef.value = props.checkAgentTotal
			// 审批人
			if (props.taskType === taskTypeEnum.Apply) {
				selectTypeRef.value =
					taskSelect[unref(value) as keyof typeof taskSelect]?.[1]?.value
			}
			// 我的已办
			if (props.taskType === taskTypeEnum.DoneTask) {
				selectTypeRef.value =
					taskSelect[unref(value) as keyof typeof taskSelect]?.[0]?.value
			}
			// 我的知会
			if (taskTypeEnum.TaskNotice === unref(props.taskType)) {
				selectTypeRef.value =
					taskSelect[unref(value) as keyof typeof taskSelect]?.[0]?.value
				selectCountRef.value =
					taskSelect[unref(value) as keyof typeof taskSelect]?.[0]?.count
			}
		}
	},
	{
		immediate: true,
	}
)

</script>

<style lang="less" scoped></style>
